<template>
  <div ref="chartRef" style="width: 300px; height: 300px"></div>
</template>

<script setup>
//安装插件
// npm install echarts
// npm install echarts-liquidfill
import { onMounted, onBeforeUnmount, ref, watch, toRefs } from "vue";
import * as echarts from "echarts";
import "echarts-liquidfill";

const props = defineProps({
  chartData_liquidFill: {
    type: Object,
    default: () => ({
      data: 0.6, // 默认值
      colors: ["#336699"],
      borderColor: "#156ACF",
      backgroundColor: "#E3F7FF",
      title_text: "正标题",
    }),
  },
});
const { chartData_liquidFill } = toRefs(props);

const chartRef = ref(null);
let Chart_liquidFill = null;

const option = () => ({
  title: {
    text: chartData_liquidFill.value.title_text,
    left: "center",
  },
  series: [
    {
      type: "liquidFill", // 水球图类型
      data: [chartData_liquidFill.value.data], // 水位值，范围为 0 到 1
      radius: "80%", // 水球大小
      color: chartData_liquidFill.value.colors, // 波浪颜色
      //为多个波浪单独设置颜色
      //  data: [
      //  { value: 0.5, itemStyle: { color: '#72D1FB' } },
      //  { value: 0.4, itemStyle: { color: '#43ABF7' } },
      //  { value: 0.3, itemStyle: { color: '#1598ED' } }
      // ],
      label: {
        normal: {
          formatter: `${(chartData_liquidFill.value.data * 100).toFixed(0)}%`, // 显示的文本
          textStyle: {
            fontSize: 24,
            color: "#333",
          },
        },
      },
      outline: {
        // 定义水球图的外边框样式
        show: true,
        borderDistance: 4,
        itemStyle: {
          borderWidth: 2,
          borderColor: chartData_liquidFill.value.borderColor,
        },
      },
      backgroundStyle: {
        color: chartData_liquidFill.value.backgroundColor, // 背景色浅蓝色
      },
    },
  ],
});

onMounted(() => {
  Chart_liquidFill = echarts.init(chartRef.value);
  Chart_liquidFill.setOption(option());
});

onBeforeUnmount(() => {
  if (Chart_liquidFill) {
    Chart_liquidFill.dispose(); // 销毁 ECharts 实例
    Chart_liquidFill = null;
  }
});

// 监听单个属性的变化
watch(chartData_liquidFill, () => {
  if (Chart_liquidFill) {
    Chart_liquidFill.setOption(option());
  }
}, { deep: true });
</script>
